<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			input{
			    border: none;
			    outline: none;
			}

			li{
				list-style: none;
			}
			.left{
				line-height:35px;
				padding-top:10px;
				margin-bottom:20px;
			}
			.c1 input[type="email"],.c1 input[type="text"],.c1 input[type="password"]{
					width:240px;
					height:38px;
					border:1px #ccc solid;
			}
			#email{
				background: url(../img/login-input5.png) no-repeat center left;
				background-position:10px ;
				padding-left:35px;
			}
			#name{
				background: url(../img/login-input1.png) no-repeat center left;
				background-position:10px ;
				padding-left: 35px;
			}
			#password,#password2{
				background: url(../img/login-input2.png) no-repeat center left;
				background-position:10px ;
				padding-left: 35px;
			}
			#num{
				background: url(../img/login-input3.png) no-repeat center left;
				background-position:10px ;
				padding-left: 35px;
			}
			.c1 h3{
				height:40px;
				line-height:28px;
				background:#f7f7f7;
				padding-left:40px;
				border-top:1px #d7d7d7 solid;
				font-size:25px;
				font-weight:normal;
				padding-top: 10px;
			}
			.padding-left span{
				color:darkgrey;
				font-size: 15px;
			}
			.agree a{
				color:aqua ;
				font-size: 15px;
			}
			.agree{
				padding-left: 100px;
			}
			.agree span{
				font-size: 15px;
				color: #808080;
			}
			#zhuce{
				border: 0 none;
				margin-top: 25px;
				cursor: pointer;
				width: 200px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				border-radius: 8px;
				background-color: deepskyblue;
			}
			#zhuce:hover{
				background-color: dodgerblue;
			}
			.register{
				padding-left: 70px;
			}
			.c1 .padding-left{
				padding-left: 40px;
			}
			#num{
				width: 150px;
			}
				
			#num1{
				margin-left: 10px;
				width:70px ;
				text-align: center;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="c1">
			<div>
				<h3>邮箱注册</h3>
			</div>
			<ul>
				<li>
					<div class="left padding-left">
						<input type="email" name="email" placeholder="请输入常用的邮箱" id="email" required="邮箱不能为空"/>
						<label><span>请输入您的常用邮箱</span></label>
					</div>
				</li>
				<li>
					<div class="left padding-left">
						<input type="text" name="name"   placeholder="请输入昵称" id="name" />
						<label><span>4-12位字符、英文、数字或者中文均可</span></label>
					</div>
				</li>
					<li>
						<div class="left padding-left">
							<input type="password" name="password" placeholder="请输入密码" id="password"/>
							<label><span>6-16位字符或数字、字母,区分大小写</span></label>
						</div>
					</li>
					<li>
						<div class="left padding-left">
							<input type="password" name="password2" placeholder="请再次输入密码" id="password2" />
							<label><span>请再次输入密码</span></label>
						</div>
					</li>
					<li>
						<div class="left padding-left">
							<input type="text" name="num" placeholder="请输入右侧验证码" id="num" />
							<input type="text" name="num1" value="SMER" id="num1" disabled="disabled"/>
							<label><span>请输入右侧验证码</span></label>
						</div>
						
					</li>
					<li>
						<div class="agree">
							<input type="checkbox" name="agree" id="agree" checked/>
							<span>同意<a href="">用户服务条款</a></span>
						</div>
					</li>
					<li>
						<div class="register">
							<input type="submit" name="zhuce" value="注册" id="zhuce"/>
						</div>
					</li>
			</ul>
		</div>
	</body>
</html>
